<style type="text/css">
        .location_container{
            
        }
        .location{
            width:320px;
            height:230px;
            float:left;
            margin:20px 5px;
            box-shadow: 2px 2px 5px #888;
            -moz-box-shadow: 2px 2px 5px #888;
            -webkit-box-shadow: 2px 2px 5px #888;
            cursor:pointer;
        }
        .location_title{
            position: absolute;
            width: 100%;
            bottom:0px;
            text-align:center;
            background-color:black;
            color:white;
            line-height:36px;
            height:36px;
            opacity: .7;
        }
        .location_description{
            text-align: left;
            line-height: 14px;
            font-size: 12px;
            display:none;
            padding:10px;
        }
</style>

<div class="location_container">
    {% for location in locations %}
        <a href="#location/{{location.id}}">
            <div data-id="{{location.id}}" class="location" style="position:relative;background-image:url({{asset('bundles/salgamosfrontend/images/'~location.image)}})">
                <div class="location_title" style="">{{location.name}}
                    <div class="location_description">
                        {{location.description}}
                    </div>
                </div>
            </div>
        </a>
    {% endfor %}
</div>

<div style="clear:both;"></div>

<script type=text/javascript>
     $(document).ready(function() {
        $('.location').hover(function(){
            $(this).find('.location_description').fadeIn('slow');
            var $title = $(this).find('.location_title');
            $title.stop().animate({opacity:0.8, height:'230'},500,function(){
            });            
        },function(){
            $(this).find('.location_description').stop().fadeOut('fast');
            var $title = $(this).find('.location_title');
            $title.stop().animate({opacity:0.7, height:'30'},500,function(){
            });            
        });
    });
</script>
